<template>
  <a-select
    v-model:value="selectedRoleVal"
    :dropdownStyle="{}"
    :placeholder="l('FilterByRole')"
    @change="selectedChange($event)"
    allowClear
    style="width: 100%"
    :maxTagCount="3"
  >
    <a-select-option value="">全部</a-select-option>
    <a-select-option :key="index" :value="object.value" v-for="(object, index) of objectitems">
      {{ object.name }}
    </a-select-option>
  </a-select>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base';
  import { NameValueDto, EntityChangeHistoryServiceProxy } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'object-select',
    mixins: [AppComponentBase],
    props: {
      value: {
        type: Array,
      },
    },
    emits: ['update:value', 'change'],
    data() {
      return {
        entityChangeHistory: new EntityChangeHistoryServiceProxy(this.$apiUrl, this.$api),
        objectitems: new Array<NameValueDto>(),
      };
    },
    computed: {
      selectedRoleVal: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('update:value', val);
        },
      },
    },
    mounted() {
      this.entityChangeHistory.getEntityHistoryObjectTypes().then((result) => {
        this.objectitems = result as NameValueDto[];
      });
    },
    methods: {
      selectedChange(selectKey) {
        this.selectedRoleVal = selectKey;
        this.$emit('change', selectKey);
      },
    },
  });</script
>s
